import React,{Component}  from 'react'
import '../pages/set.css'
import { Form, Input, Button,Upload, message,Image,Select,Cascader } from 'antd';
import { CloudUploadOutlined  } from '@ant-design/icons';
import axios from "axios";
import api from '../api'
import cityData from "./CityData";
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 12 },
};

const validateMessages = {
    required: '${label} is required!',
    types: {
        tel: '${label} is not a valid tel!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    listType:"picture",
    headers: {
        authorization: 'authorization-text',
    },
    onChange(info) {
        if (info.file.status !== 'uploading') {
            // console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name} 上传成功`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 上传失败`);
        }
    },
};
const options = [
    {id:1,value:"男装服饰"},
    {id:2,value:"女装服饰"},
    {id:3,value:"儿童服饰"},
    {id:4,value:"鞋子"},
    {id:5,value: "美妆"},
    {id:6,value:"首饰小物件"},
    {id:7,value:"家用电器"},
    {id:8,value:"奢侈品"},
    {id:9,value:"数码设备"},
    {id:10,value: "医药保健"},
    {id:11,value:"手表"},
    {id:12,value:"文具"},
    {id:13,value:"生鲜"},
    {id:14,value:"零食"},
    {id:15,value: "户外运动"}
];

class BasicSetChild extends Component{
    state={
        username:'shop01',
        imgSrc:'',//头像
    }

    //得到店铺数据
    getShopInfo=()=>{
       return new Promise((resolve, reject) => {
            axios.post(api.basicSet.basic+this.state.username).then(res=>{
                if(res.data.code==200){
                    resolve(res.data.data)
                }
            })
        })
    }
    async componentDidMount() {
        // let newarr=JSON.parse(sessionStorage.getItem('userlist'))
        // let name=newarr[0]
        // this.setState({
        //     username:name
        // })
        await this.getShopInfo().then(res=>{
            console.log('res',res)
            let arr = [res.area.areaPro,res.area.areaCity,res.area.areaArea]
            this.setState({
                imgSrc:res.shopLogo,
            })
            this.formRef.current.setFieldsValue({
                    addrs:res.shopAddress,
                    shopJianJie:res.shopDesc,
                    shopName:res.shopName,
                    shopPhone:res.shopPhone,
                    kname:res.shopGroup,
                    province:res.area.areaPro,
                    city:res.area.areaCity,
                    area:res.area.areaArea,
                    cityInfo:arr
            })
        })
    }
    formRef = React.createRef();
    render() {
        const onFinish = (values) => {
            console.log(values)
            let formData = new FormData();
            formData.append('file', values.touxiang==undefined?this.state.imgSrc:values.touxiang[0].originFileObj)
            formData.append('shopAddress',values.addrs)
            formData.append('userName', this.state.username)
            formData.append('shopName',values.shopName)
            formData.append('shopPhone',values.shopPhone)
            formData.append('shopDesc',values.shopJianJie)
            formData.append('shopGroup',values.kname)
            formData.append('area.areaPro',values.cityInfo[0])
            formData.append('area.areaCity',values.cityInfo[1])
            formData.append('area.areaArea',values.cityInfo[2])
            axios.post(api.basicSet.updata,
                formData,{
                headers:{
                    "Content-Type": "multipart/form-data"
                }
            }).then(res=>{
                console.log(res)
            })
            this.formRef.current.setFieldsValue({
                touxiang:undefined
            })

        };
        const normFile = (e) => {
            console.log('Upload event:', e);
            if (Array.isArray(e)) {
                return e;
            }
            // this.setState({
            //     imgSrc:
            // })
            return e && e.fileList;
        };
        return(
            <div className='account'>
                <h2>基本设置</h2>
                <Form {...layout} name="nest-messages" onFinish={onFinish}
                      validateMessages={validateMessages}
                      ref={this.formRef}>
                            <Form.Item name='shopName' label="店铺名称" rules={[{ required: true }]}>
                                <Input placeholder="请输入店铺名称，不超过16个字"/>
                            </Form.Item>
                            <Form.Item name='shopPhone' label="店铺联系电话" >
                                <Input placeholder="请输入电话号码" value={this.state.shopPhone} />
                            </Form.Item>
                            <Form.Item name='shopJianJie' label="店铺简介">
                                <Input.TextArea placeholder="请输入店铺简介，不超过30个字"/>
                            </Form.Item>
                            <Form.Item name='kname' label="选择类目" className='category'>
                                <Select style={{ width: 443 }} placeholder="请选择类目" optionFilterProp="label" options={options}/>
                            </Form.Item>
                            <Form.Item name='cityInfo' label="所在省市" className='province'>
                                <Cascader options={cityData} />
                            </Form.Item>
                            <Form.Item name='addrs' label="详细地址">
                                <Input placeholder="请输入详细地址，不超过20个字" />
                            </Form.Item>
                            <Form.Item name='touxiang' label="店铺logo：" valuePropName="fileList"
                                       getValueFromEvent={normFile}>
                                <Upload {...props} className='logoUp' >
                                        <Button type='text' icon={<CloudUploadOutlined />}></Button>
                                </Upload>
                            </Form.Item>
                            <Form.Item  className='frmSubmit' >
                                <Image
                                    width={150}
                                    src={this.state.imgSrc==''?'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png':'http://172.17.6.224:8085'+this.state.imgSrc}
                                />
                            </Form.Item>
                            <Form.Item className='frmSubmit'>
                                <Button type="primary" htmlType="submit" className='butSubmit'>
                                    保存
                                </Button>
                            </Form.Item>
                </Form>
            </div>
        )
    }
}
export default BasicSetChild